<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<view style="height: 20rpx;"></view>
		<!-- 取货方式开始（快递配送、上门自提）未完成 -->
		<view v-if="allowSelfDelivery && orderInfo.order_type === 0">
			<view class="card" style="padding: 0;" @click="expressModePopup.show=true">
				<u-cell-item icon="vk-mall-icon-daifahuo" title="取货方式" :value="expressModeCom" :value-style="{'color':'#303133','fontWeight': 'bold'}" :border-bottom="false"></u-cell-item>
			</view>
			<u-popup v-model="expressModePopup.show" mode="bottom" border-radius="14" :closeable="true">
				<view class="express-mode-popup">
					<view class="express-mode-popup-title">更换取货方式</view>
					<u-radio-group v-model="form1.delivery_mode" class="express-mode-popup-radio-group">
						<view class="express-mode-popup-item" @click="form1.delivery_mode=0">
							<u-icon name="vk-mall-icon-wuliu" size="40"></u-icon>
							<text class="express-mode-popup-item-text">快递配送</text>
							<u-radio :name="0" class="express-mode-popup-item-radio" activeColor="var(--main)"></u-radio>
						</view>
						<view class="express-mode-popup-item" @click="form1.delivery_mode=2">
							<u-icon name="vk-mall-icon-dianpu" size="40"></u-icon>
							<text class="express-mode-popup-item-text">上门自提</text>
							<u-radio :name="2" class="express-mode-popup-item-radio" activeColor="var(--main)"></u-radio>
						</view>
					</u-radio-group>
					<view class="express-mode-popup-footer">
						<view class="express-mode-popup-footer-info">
							<view class="express-mode-popup-footer-info-price-box">
								<text>总价：</text><text class="express-mode-popup-footer-info-price">¥ {{ shouldPaymentAmountCom }}</text>
							</view>
							<view class="express-mode-popup-footer-info-num">
								<text>共1件</text>
								<text class="express-mode-popup-footer-info-express-price" v-if="form1.delivery_mode === 0">含配送费：¥ {{ expressAmountCom }}</text>
								<text class="express-mode-popup-footer-info-express-price" v-else>无配送费</text>
							</view>
						</view>
						<view class="express-mode-popup-footer-button" @click="expressModePopup.show=false" v-if="!loading.createOrder">
							确定
						</view>
						<view class="express-mode-popup-footer-button loading" v-else>
							计算中...
						</view>
					</view>
				</view>
			</u-popup>
			<view class="card express-mode-self" v-if="form1.delivery_mode === 2">
				<view class="shop-info">
					<view class="shop-info-box">
						<view class="shop-name">{{ shopInfo.name }}</view>
						<view class="shop-address">{{ $fn.getData(shopInfo,'position.formatted_address') }}</view>
					</view>
					<view class="shop-location">
						<view class="shop-location-delivery-distance" v-if="shopInfo.distance"> 距您{{ $fn.toDecimal(shopInfo.distance, 3) }}km </view>
						<view> <image class="shop-logo" :src="shopInfo.logo" mode="aspectFill"></image> </view>
					</view>
				</view>
				<view class="single-box">
					<view class="single-box-left">联系手机号</view>
					<view class="single-box-center"><input v-model="form1.mobile" class="single-box-center-input" placeholder="请输入手机号"/></view>
					<!-- #ifdef MP -->
					<view class="single-box-right">
						<button class="single-box-right-button" plain open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber">自动填写</button>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 取货方式结束 -->

		<!-- 选择收货地址,默认收货地址展示 -->
		<view class="card" style="padding: 0;min-height: 124rpx;" v-if="complete && needExpress">
			<u-cell-item icon="vk-mall-icon-ditu" :border-bottom="false" @click="chooseAddress">
				<view slot="title" class="address-box">
					<view v-if="loading.createOrder" class="address-info">
						<view>
							<text style="font-weight: bold;">获取中...</text>
						</view>
						<view>
							<text>请稍等...</text>
						</view>
					</view>
					<view v-else-if="addressInfo && form1.address_id" class="address-info">
						<view>
							<text style="font-weight: bold;">{{ addressInfo.name }}</text>
							<text style="margin-left: 10rpx;">{{ addressInfo.mobile }}</text>
							<u-tag v-if="addressInfo.alias" :text="addressInfo.alias" bg-color="#000000" size="mini" mode="dark" shape="circle" class="tag" />
						</view>
						<view>
							<text>{{ addressInfo.formatted_address }}</text>
						</view>
					</view>
					<view v-else>请选择收货地址</view>
				</view>
			</u-cell-item>
		</view>

		<!-- 用户购买的商品列表展示 -->
		<view class="card" style="padding: 30rpx;">
			<vk-mall-order-goods-list :list="orderInfo.goods_sku_list"></vk-mall-order-goods-list>
		</view>
		<!--
			邮费
			优惠方式,可选 会员卡 优惠券 积分 (三者只能选择其一)
			订单总金额
			如果有优惠,则显示优惠金额和实付金额
		-->
		<view class="card" style="padding: 30rpx;">
			<view v-if="giveIntegral>0">
				<u-notice-bar mode="vertical" :list="['本次付款后预计可获得 '+giveIntegral+' 个积分']" :volume-icon="false" type="warning" :close-icon="false" font-size="24"></u-notice-bar>
			</view>
			<view class="cell-box">
				<view class="cell-left">商品合计（原价）</view>
				<view class="cell-right">
					<text v-if="complete">{{ $fn.priceFilter(orderInfo.amount_info.goods_amount) }}</text>
					<text v-else> - </text>
				</view>
			</view>
			<view class="cell-box" v-if="form1.delivery_mode !== 2">
				<view class="cell-left">快递费用</view>
				<view class="cell-right">
					<text v-if="complete && !loading.createOrder">{{ expressAmountCom }}</text>
					<text v-else> 计算中... </text>
				</view>
			</view>

			<view class="cell-box" v-if="isVip">
				<view class="cell-left">会员优惠</view>
				<view class="cell-right" style="color: var(--main);">
					<view v-if="complete">
						<view v-if="$fn.getData(orderInfo,'discount_info.vip_discount_amount')">
							<u-tag :text="$fn.getData(orderInfo,'discount_info.used_vip_name')" type="error" size="mini" mode="dark"/>
							<text style="margin-left: 20rpx;">- {{ $fn.priceFilter($fn.getData(orderInfo,'discount_info.vip_discount_amount')) }}</text>
						</view>
						<view v-else>未使用会员优惠</view>
					</view>
					<text v-else> - </text>
				</view>
			</view>
			<block v-if="couponList && couponList.length > 0">
				<view class="cell-box">
					<view class="cell-left">优惠券抵扣</view>
					<view class="cell-right" style="color: var(--main);">
						<view v-if="complete" @click="couponPopup.show=true">
							<view v-if="$fn.getData(orderInfo,'discount_info.coupon_discount_amount')">
								<u-tag :text="$fn.getData(orderInfo,'discount_info.used_coupon_name')" type="error" size="mini" mode="dark"/>
								<text style="margin-left: 20rpx;">- {{ $fn.priceFilter($fn.getData(orderInfo,'discount_info.coupon_discount_amount')) }}</text>
							</view>
							<text v-else>选择优惠券</text>
						</view>
						<text v-else> - </text>
					</view>
				</view>
				<u-popup v-model="couponPopup.show" mode="bottom" border-radius="14" length="1050rpx" safe-area-inset-bottom closeable>
					<view class="coupon-popup">
						<view class="coupon-popup-title">请选择优惠券</view>
						<u-notice-bar v-if="couponPopup.notice.show" mode="vertical" :list="couponPopup.notice.list" type="error" close-icon font-size="24" @close="couponPopup.notice.show=false"></u-notice-bar>
						<u-tabs :list="couponPopup.tabs.list" :is-scroll="false" v-model="couponPopup.tabs.index" active-color="var(--main)" font-size="26" :show-bar="false" :duration="0"></u-tabs>
						<scroll-view v-if="couponPopup.tabs.index == 0" :scroll-y="true" class="coupon-popup-scroll-view" :style="'height: '+(couponPopup.notice.show?600:670)+'rpx;'" @touchmove.stop>
							<view style="padding: 20rpx 0;">
								<view v-for="(coupon,index) in couponList1Com" :key="coupon._id">
									<vk-mall-user-coupon :coupon="coupon" mode="choose" :checked-id="form1.used_coupon_id" @click="chooseCoupon(coupon);"></vk-mall-user-coupon>
								</view>
							</view>
						</scroll-view>
						<scroll-view v-if="couponPopup.tabs.index == 1" :scroll-y="true" class="coupon-popup-scroll-view" :style="'height: '+(couponPopup.notice.show?600:670)+'rpx;'" @touchmove.stop>
							<view style="padding: 20rpx 0;">
								<view v-for="(coupon,index) in couponList2Com" :key="coupon._id">
									<vk-mall-user-coupon :coupon="coupon"></vk-mall-user-coupon>
								</view>
							</view>
						</scroll-view>
						<view class="coupon-popup-confrim-btn">
							<view class="btn" @click="chooseCoupon();">不使用优惠券</view>
							<view class="btn confrim" @click="autoCalcOptimal();">为我使用最优惠方案</view>
						</view>
					</view>
				</u-popup>
			</block>

			<!-- 2023-05-07 新增积分抵扣 -->
			<view class="cell-box" v-if="$fn.getData(orderInfo,'discount_info.integral_discount_amount')">
				<view class="cell-left">使用积分</view>
				<view class="cell-right" style="color: var(--main);">
					<view v-if="complete">
						<view>
							<u-tag text="积分抵扣" type="error" size="mini" mode="dark"/>
							<text style="margin-left: 20rpx;">- {{ $fn.priceFilter($fn.getData(orderInfo,'discount_info.integral_discount_amount')) }}</text>
						</view>
					</view>
					<text v-else> - </text>
				</view>
			</view>

			<view v-if="showOptimal">
				<u-notice-bar v-if="notice2.show" mode="vertical" :list="notice2.list" type="success" close-icon font-size="24" @close="notice2.show=false"></u-notice-bar>
			</view>

			<view class="cell-box" style="border-top: 2rpx solid #f8f8f8;">
				<view class="cell-left">订单应付</view>
				<view class="cell-right" style="font-weight: 500;">
					<text v-if="complete && !loading.createOrder">¥{{ shouldPaymentAmountCom }}</text>
					<text v-else style="color: var(--main)">计算中...</text>
				</view>
			</view>

			<view class="cell-box" style="border-top: 2rpx solid #f8f8f8;" v-if="user_account_balance > 0">
				<view class="cell-left">使用余额</view>
				<view class="cell-right" style="font-weight: 500;" v-if="complete && !loading.createOrder">
					<view><u-switch v-model="used_balance_key" activeColor="var(--main)" size="40"></u-switch></view>
					<view>{{ vk.pubfn.priceFilter(form1.used_balance) }}</view>
				</view>
			</view>

		</view>

		<!-- 用户备注信息 -->
		<view class="card">
			<view class="card-title">买家留言</view>
			<vk-data-input v-model="form1.buyer_remark" placeholder="选填，建议留言前先与商家沟通" type="textarea" input-align="left" :customStyle="{backgroundColor: '#f3f3f3',padding: '20rpx'}"/>
		</view>

		<!-- 底部安全区域 -->
		<view class="safe-area-inset-bottom"></view>
		<!-- 底部显示共xxxx件，合计 ¥xxxxxxxx.xx  下单按钮 -->
		<view class="navigation">
			<view class="navigation-main">
				<view class="navigation-main-total"><text>共 {{ totalGoodsNumCom }} 件，合计</text><text class="total-price" :style="'font-size: '+totalPriceSize(vk.pubfn.priceFilter(needPaymentAmountCom).length)+'rpx;'">{{ vk.pubfn.priceFilter(needPaymentAmountCom) }}</text></view>
				<view class="navigation-main-buy submit" @click="submit" v-if="!loading.createOrder">下单</view>
				<view class="navigation-main-buy loading" v-else>计算中...</view>
			</view>
			<view class="navigation-inset-bottom"></view>
		</view>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
	</view>
</template>

<script>
	var vk = uni.vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				allowSelfDelivery:false, // 允许自提（该功能还在测试中）
				needExpress:true,
				giveIntegral:0,
				// 地址信息
				addressInfo:{},
				isVip:false,
				mchInfo:{},
				user_account_balance:"", // 用户当前账户余额
				// 订单信息
				orderInfo:{
					// 金额信息
					amount_info: {
						should_payment_amount: 0, // 订单应付金额 单位分 100 = 1元 应付金额为优惠后的金额
						goods_amount:""
					},
					// 折扣信息
					discount_info: {},
					// 购买的商品数据
					goods_sku_list: [],
				},
				couponList:[],
				shopInfo:{},
				// 表单请求数据
				form1:{
					address_id: "", // 买家收货地址id
					buyer_remark: "", // 买家备注
					cart_list: [], // 购物车内的商品列表（需要下单的商品列表）
					used_coupon_id: "", // 本订单使用的优惠券id
					used_vip: true, // 本订单使用的vip等级。若为true 代表使用会员等级，若为字符串，代表权益卡（目前不支持权益卡），因此只能是会员等级
					delivery_mode: 0, // 交货方式 0:快递配送 1:物流到付（实物商品时有效，目前只支持快递配送）2:上门自提
					add_key: false, // true 下单 false 查询订单价格
					calc_optimal: true, // 是否需要计算最优方案
					used_balance: 0, // 使用余额数量
					used_integral: 0, // 使用积分数量
					delivery_shop_id: "", // 上门自提的门店id（仅delivery_mode=2时有效）
					location: {}, // 我的定位（仅delivery_mode=2时有效）
					mobile: "", // 我的手机号（仅delivery_mode=2时有效）
				},
				used_balance_key:false, // 使用余额的开关
				scrollTop:0,
				loading:{
					createOrder:false, // loading.createOrder
				},
				complete:false,
				showOptimal:false,
				couponPopup:{
					show:false,
					tabs:{
						list:[{name:'可用优惠券列表'},{name:'不可用优惠券列表'}],
						index:0
					},
					notice:{
						show:true,
						list:['部分优惠券和会员优惠、积分抵扣可能无法同时使用。']
					}
				},
				notice2:{
					show:true,
					list:['已自动为您使用最优惠方案，您可以直接下单！']
				},
				expressModePopup:{
					show: false,
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options={}){
				let that = this;
				console.log("init: ",options);
				if (options.mode == "buy") {
					// 从立即购买进入，此时只有1个商品
					that.form1.cart_list = [ options ];
				} else {
					// 从购物车进入，此时可能有多个商品
					let key = options.mode === "tempCart" ? "temp" : "list";
					let goods_sku_list = vk.myfn.cart.getList(key);
					let cart_list = [];
					let checked_goods_sku_list = [];
					goods_sku_list.map((item, index) => {
						if (item.action_checked){
							cart_list.push({
								sku_id: item.sku_id,
								buy_num: item.buy_num,
								goods_id: item.goods_id,
							});
							checked_goods_sku_list.push(item);
						}
					});
					that.orderInfo.goods_sku_list = checked_goods_sku_list;
					that.form1.cart_list = cart_list;
				}
				that.createOrder();
			},
			// 预创建订单
			async createOrder(){
				let that = this;
				let formData = {
					...that.form1,
					add_key: false
				};
				if (formData.delivery_mode === 2) {
					let location = await vk.myfn.user.getLocation()
					formData.location = {
						latitude: location.latitude,
						longitude: location.longitude,
					};
					if (!that.form1.mobile) that.form1.mobile = vk.getVuex('$user.userInfo.mobile');
				}
				return vk.callFunction({
					url: 'client/order.createOrder',
					data: formData,
					loading: { name:"loading.createOrder", that },
					success(data) {
						that.user_account_balance = data.user_account_balance; // 用户账户余额
						if (that.user_account_balance > 0) {
							if (!that.complete) that.used_balance_key = true;
						} else {
							that.used_balance_key = false;
						}
						that.giveIntegral = data.giveIntegral;
						that.orderInfo = data.orderInfo; // 订单信息
						that.isVip = data.isVip; // 用户是否是vip，是vip则显示vip优惠
						that.form1.used_vip = data.used_vip; // 设置使用的vip等级
						that.form1.used_coupon_id = data.used_coupon_id; // 设置使用的优惠券id
						that.shopInfo = data.shopInfo || {}; // 上门自提的店铺信息
						if (data.calc_optimal) that.couponList = data.couponList;
						that.needExpress = data.needExpress;
						if (that.needExpress) {
							// 如果需要物流配送，则展示地址信息
							that.setAddress(data.addressInfo);
						}
						that.showOptimal = data.calc_optimal; // 是否显示最优提示
						that.form1.calc_optimal = false;
						that.form1.used_balance = that.getUsedBalance();
						if (typeof data.used_integral !== "undefined") {
							that.form1.used_integral = data.used_integral;
						}
						that.complete = true;
					},
					fail: (err) => {
						that.complete = true;
						if (err.code == -5) {
							vk.alert(err.msg,()=>{
								vk.navigateBack();
							});
						} else if (err.code == -4) {
							that.form1.calc_optimal = true;
							that.form1.used_vip = "";
							that.form1.used_coupon_id = "";
							that.form1.used_integral = 0;
							that.createOrder();
							vk.alert(err.msg+"\n已自动为您选择最优惠方案");
						} else {
							vk.alert(err.msg,() => {
								if (err.code == -2) {
									that.chooseAddress();
									that.complete = false;
								} else if (err.code == -3) {
									vk.navigateToHome();
								}
							});
						}
					}
				});
			},
			// 设置收货地址
			setAddress(data){
				let that = this;
				that.addressInfo = data;
				that.form1.address_id = data._id;
			},
			// 合计价格的字体大小计算规则
			totalPriceSize(length){
				let size;
				if (length <= 8){
					size = 46;
				} else if (length <= 10){
					size = 38;
				}  else if (length <= 13){
					size = 34;
				} else{
					size = 30;
				}
				return size;
			},
			// 下单提交事件
			submit(){
				let that = this;
				let formData = {
					...that.form1,
					mode: that.options.mode,
					add_key: true
				};
				if (formData.delivery_mode === 2) {
					if (vk.pubfn.isNotNull(that.shopInfo)) formData.delivery_shop_id = that.shopInfo._id;
				}
				vk.callFunction({
					url: 'client/order.createOrder',
					data: formData,
					title:"下单中...",
					success(data) {
						if (that.options.mode === "cart") {
							// 下单成功后，清除本地购物车
							let goods_sku_list = vk.myfn.cart.getList("list");
							that.form1.cart_list.map((item) => {
								let index = vk.pubfn.getListIndex(goods_sku_list, "sku_id", item.sku_id);
								goods_sku_list.splice(index,1);
							});
							vk.vuex.dispatch('$cart/setCart', goods_sku_list);
						} else if (that.options.mode === "tempCart"){
							// 清除临时购物车
							vk.setVuex('$cart.temp', []);
						}
						vk.redirectTo(`./goods-order-pay?order_no=${data.orderInfo.order_no}&pay=1`);
					},
					fail: (err) => {
						if (err.code == -6) {
							vk.confirm(err.msg, "下单失败", "查看我的订单", "好的", (res) => {
								if (res.confirm) {
									vk.navigateTo("/pages/user/order/list?type=all");
								}
							});
						} else if (err.code == -4) {
							that.form1.calc_optimal = true;
							that.form1.used_vip = "";
							that.form1.used_coupon_id = "";
							that.form1.used_integral = 0;
							that.createOrder();
							vk.alert(err.msg+"\n已自动为您选择最优惠方案");
						} else {
							vk.alert(err.msg, () => {
								if (err.code == -2) {
									that.chooseAddress();
								}
							});
						}
					}
				});
			},
			// 选择地址
			chooseAddress(){
				let that = this;
				vk.navigateTo({
					url: "/pages/user/address/list?mode=choose",
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						choose: (data) => {
							that.setAddress(data);
							that.createOrder();
						}
					}
				})
			},
			couponClick({ coupon, index }){
				let that = this;
				let { couponList } = that;
				couponList.map((item, index) => {
					that.$set(item,"checked",false);
				});
				that.$set(coupon,"checked",true);
				that.form1.used_coupon_id = coupon._id;
			},
			chooseCoupon(coupon){
				let that = this;
				let { couponPopup, form1, orderInfo } = that;
				if (coupon && coupon._id) {
					form1.used_coupon_id = coupon._id;
					form1.used_vip = coupon.couponInfo.only_original_price_use ? false : true;
				} else {
					form1.used_vip = true;
					form1.used_coupon_id = "";
				}
				setTimeout(() => {
					couponPopup.show = false;
					that.createOrder();
				}, 200);
			},
			getUsedBalance(){
				let { user_account_balance=0, orderInfo, used_balance_key } = this;
				if (!used_balance_key) return 0;
				let should_payment_amount = orderInfo.amount_info.should_payment_amount;
				let used_balance = user_account_balance >= should_payment_amount ? should_payment_amount : user_account_balance;
				return used_balance;
			},
			// 获取微信绑定的手机号码（新方式）
			getPhoneNumber(e){
				let that = this;
				// 微信新增了code参数，可以直接传code，不再需要传 encryptedData 和 iv
				let { code } = e.detail;
				if (!code) {
					return false;
				}
				vk.userCenter.getPhoneNumber({
					data:{
						code,
						encryptedKey: that.encryptedKey
					},
					success: (data) => {
						that.form1.mobile = data.phone;
					}
				});
			},
			// 使用最优惠方案
			autoCalcOptimal(){
				this.couponPopup.show = false;
				this.form1.calc_optimal = true;
				this.createOrder();
			},
		},
		// 监听器
		watch:{
			used_balance_key: {
				handler(newVal, oldVal){
					this.form1.used_balance = newVal ? this.getUsedBalance() : 0;
				},
				immediate: true,
			},
			"form1.delivery_mode"(newVal, oldVal){
				this.createOrder();
			},
		},
		// 计算属性
		computed:{
			// 应付金额
			shouldPaymentAmountCom(){
				return this.vk.pubfn.priceFilter(this.orderInfo.amount_info.should_payment_amount);
			},
			// 还需支付金额
			needPaymentAmountCom(){
				return this.orderInfo.amount_info.should_payment_amount - this.form1.used_balance;
			},
			// 合计购买的商品件数
			totalGoodsNumCom(){
				let list = this.orderInfo.goods_sku_list;
				let num = 0;
				list.map((item, index) => {
					num += item.buy_num;
				});
				return num;
			},
			expressAmountCom(){
				let { vk, orderInfo } = this;
				let express_amount = vk.pubfn.getData(orderInfo,'amount_info.express_amount',0);
				if (express_amount == 0){
					return "包邮"
				} else {
					return vk.pubfn.priceFilter(express_amount);
				}
			},
			discountDescCom(){
				let { vk, orderInfo } = this;
				let str = "";
				let num = 0;
				if (vk.pubfn.getData(orderInfo,'discount_info.vip_discount_amount')) {
					num ++;
					str = vk.pubfn.getData(orderInfo,'discount_info.used_vip_name');
				} else if (vk.pubfn.getData(orderInfo,'discount_info.coupon_discount_amount')) {
					num ++;
					str = vk.pubfn.getData(orderInfo,'discount_info.used_coupon_name');
				} else if (vk.pubfn.getData(orderInfo,'discount_info.business_discount_amount')) {
					num ++;
					str = "商家优惠"
				}
				if (num > 1) {
					str = "综合优惠"
				}
				return str;
			},
			discountAmountCom(){
				let { vk, orderInfo } = this;
				let str = "";
				let amount = vk.pubfn.priceFilter(vk.pubfn.getData(orderInfo,'discount_info.total_discount'));
				if (amount) {
					str = "-"+amount;
				}
				return str;
			},
			couponList1Com(){
				let { vk, couponList } = this;
				let list = [];
				couponList.map((item, index) => {
					if (!item.disabled){
						list.push(item);
					}
				});
				return list;
			},
			couponList2Com(){
				let { vk, couponList } = this;
				let list = [];
				couponList.map((item, index) => {
					if (item.disabled){
						list.push(item);
					}
				});
				return list;
			},
			expressModeCom(){
				let delivery_mode = this.form1.delivery_mode;
				let arr = ["快递","到付","自提"];
				return arr[delivery_mode];
			}
		}
	}
</script>
<style lang="scss" scoped>


	.card{
		background-color: #ffffff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		.card-title{
			margin-bottom: 20rpx;
			font-weight: bold;
		}
	}
	.cell-box{
		display: flex;
		padding: 20rpx 0;
		.cell-left{
			flex: 1;
			text-align: left;
			color: #606266;
		}
		.cell-right{
			flex: 1;
			text-align: right;
		}
	}

	.navigation{
		position: fixed;
		bottom: 0;
		border-top: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		width: 100%;
		z-index: 99;
		.navigation-main{
			display: flex;
			position: relative;
			padding: 20rpx 20rpx;
			align-items: center;
			.navigation-main-total{
				flex: 1;

				.total-price{
					margin-left: 20rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: var(--main);
				}
			}
			.navigation-main-buy{
				color: #ffffff;
				background-color: var(--main);
				padding: 20rpx 0rpx;
				width: 196rpx;
				border-radius: 20rpx;
				font-size: 34rpx;
				font-weight: bold;
				text-align: center;
			}
			.navigation-main-buy.loading{
				filter: grayscale(90%);
			}
			.navigation-main-buy.submit:active{
				filter: grayscale(50%);
			}
		}
		.navigation-inset-bottom{
			height: 0;
			height: constant(safe-area-inset-bottom);
			height: env(safe-area-inset-bottom);
			display: block;
			width: 100%;
		}
	}


	/* 底部安全区域 */
	.safe-area-inset-bottom{
		height: calc(140rpx);
		height: calc(140rpx + constant(safe-area-inset-bottom));
		height: calc(140rpx + env(safe-area-inset-bottom));
		display: block;
	}


	.address-box{
		.address-info{
			font-size: 24rpx;
			line-height: 1.5;
		}
		.tag{
			margin-left: 20rpx;
			position: relative;
			top:-4rpx;
			letter-spacing: 2rpx;
			font-size: 24rpx;
		}
	}
	.coupon-popup{
		.coupon-popup-title{
			height: 100rpx;
			line-height: 100rpx;
			padding: 0rpx 30rpx;
			font-weight: bold;
			font-size: 34rpx;
		}
		.coupon-popup-scroll-view{
			height: 600rpx;
			padding: 0 0rpx;
			box-sizing: border-box;
			background-color: #f8f8f8;
		}
		.coupon-popup-confrim-btn{
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
			display: flex;
			.btn{
				flex: 1;
				text-align: center;
			}
			.btn.confrim{
				background-color: var(--main);
				color: #ffffff;
			}
		}
	}

	/* 取货方式弹窗开始 */
	.express-mode-popup{
		padding: 30rpx;
		background-color: #f8f8f8;
		height: 700rpx;
		position: relative;
		.express-mode-popup-title{
			text-align: center;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		.express-mode-popup-radio-group{
			width: 100%;
			display: block;
		}
		.express-mode-popup-item {
			border-bottom: 1px solid #f3f3f3;
			padding: 36rpx;
			background-color: #fff;
			box-shadow: -4rpx 0rpx 16rpx 0rpx rgba(10,10,10,0.06);
			margin-bottom: 20rpx;
			width: 100%;
			display: flex;
			width: 100%;
			color: #333;
			.express-mode-popup-item-text{
				flex: 1;
				margin-left: 20rpx;
			}
			.express-mode-popup-item-radio{
				display: block;
			}
		}
		.express-mode-popup-footer{
			position: absolute;
			bottom: 0;
			left:0;
			width: 100%;
			background-color: #ffffff;
			padding: 30rpx;
			display: flex;
			align-items: center;
			.express-mode-popup-footer-info{
				flex: 1;
				font-size: 24rpx;
				.express-mode-popup-footer-info-price-box{
					.express-mode-popup-footer-info-price{
						color: var(--main);
						font-size: 32rpx;
					}
				}
				.express-mode-popup-footer-info-num{
					color: #9a9a9a;
					margin-top: 10rpx;
				}
				.express-mode-popup-footer-info-express-price{
					margin-left: 12rpx;
				}
			}
			.express-mode-popup-footer-button{
				background-color: var(--main);
				color: #ffffff;
				border-radius: 40rpx;
				padding: 12rpx 50rpx;
			}
			.express-mode-popup-footer-button.loading{
				filter: grayscale(90%);
			}
			.express-mode-popup-footer-button:active{
				filter: grayscale(50%);
			}
		}
	}
	/* 取货方式弹窗结束 */
	/* 上门自提门店显示开始 */
	.express-mode-self{
		padding: 26rpx 32rpx;
		font-size: 24rpx;
		.shop-info{
			position: relative;
			display: flex;
			align-items: center;
			.shop-info-box{
				flex:1;
				min-height: 102rpx;
			}
			.shop-name{
				font-size: 30rpx;
				font-weight: bold;
				color: #303133;
			}
			.shop-address{
				margin-top: 30rpx;
			}
			.shop-location{
				width: 200rpx;
				height: 130rpx;
				position: absolute;
				top: 0;
				right: -32rpx;
				display: flex;
				justify-content: center;
				background: url("") no-repeat;
				background-size: 100% 100%;
				.shop-location-delivery-distance {
					display: inline-block;
					position: absolute;
					bottom: 70rpx;
					padding: 8rpx 16rpx;
					background: #fff;
					box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(255, 113, 0, 0.3);
					border-radius: 6rpx;
					color: #333333;
					font-size: 22rpx;
					z-index: 10;
				}
				.shop-location-delivery-distance::after {
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					bottom: -9px;
					left: calc(50% - 5px);
					border: 5px solid transparent;
					border-top: 5px solid #fff;
				}
				.shop-logo{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 78rpx;
					right: 85rpx;
					border-radius: 2rpx;
				}
			}
		}
		.single-box{
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.single-box-left{
				flex: 1;
			}
			.single-box-center{
				text-align: right;
				border-right: 2rpx solid #f3f3f3;
				padding: 0 20rpx;
				margin-right: 20rpx;
				.single-box-center-input{
					font-size: 24rpx;
				}
			}
			.single-box-right{
				.single-box-right-button{
					font-size: 24rpx;
					color: var(--main);
					border: 0;
					line-height: inherit;
					padding: 6rpx 10rpx;
					margin: 0;
				}
			}
		}
	}
	/* 上门自提门店显示结束 */
</style>
